<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./css/login.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- navbar start -->
    <div class="navbar">
      <div class="content">
        <a href="#" class="logo"></a>
        <div class="middle">
          <h3>欢迎登录</h3>
        </div>
        <a href="index.html" class="right">
          <span>进入网站首页</span>
          <i>></i>
        </a>
      </div>
    </div>

    <!-- main start -->
    <main>
      <div class="login-section">
        <div id="login">
          <button
            class="tablink"
            onclick="open1('login1',this,'#27ba9b')"
            id="defaultOpen"
          >
            账户登录
          </button>
          <button class="tablink" onclick="open1('login2',this,'#27ba9b')">
            扫码登录
          </button>
          <div id="login1" class="tabcontent">
            <div class="toggle">
              <a href="">使用短信登录</a>
            </div>
            <form
              novalidate=""
              class="form"
              autocomplete="off"
              data-v-7453d80e=""
            >
              <div class="form-item" data-v-7453d80e="">
                <div class="input" data-v-7453d80e="">
                  <i class="iconfont icon-user" data-v-7453d80e="">
                    <img src="./images/timg1.png" alt="" />
                  </i>
                  <input
                    class=""
                    modelvalue="xiaotuxian001"
                    type="text"
                    placeholder="请输入用户名"
                    name="account"
                    data-v-7453d80e=""
                  />
                </div>

                <!---->
              </div>
              <div class="form-item" data-v-7453d80e="">
                <div class="input" data-v-7453d80e="">
                  <i class="iconfont icon-lock" data-v-7453d80e="">
                    <img src="./images/timg2.png" alt="" />
                  </i>
                  <input
                    class=""
                    modelvalue="123456"
                    type="password"
                    placeholder="请输入密码"
                    name="password"
                    data-v-7453d80e=""
                  />
                </div>

                <!---->
              </div>
              <div class="form-item" data-v-7453d80e="">
                <div class="agree" data-v-7453d80e="">
                  <div
                    class="xtx-checkbox"
                    name="isAgree"
                    value="true"
                    data-v-51080bd3=""
                    data-v-7453d80e=""
                  >
                    <i class="iconfont icon-checked" data-v-51080bd3=""></i>
                    <!---->
                  </div>
                  <input type="checkbox" />
                  <span data-v-7453d80e="">同意</span>
                  <a href="javascript:;" data-v-7453d80e="">《隐私条款》</a>
                  <span data-v-7453d80e="">和</span>
                  <a href="javascript:;" data-v-7453d80e="">《服务条款》</a>
                </div>
                <!---->
              </div>
              <a href="javascript:;" class="btn" data-v-7453d80e="">登录</a>
            </form>
          </div>
          <div id="login2" class="tabcontent">
            <img src="./images/loginma.png" alt="" />
          </div>
        </div>
      </div>
      <script>
        function open1(loginName, elmnt, color) {
          var i, tabcontent, tablinks

          tablinks = document.getElementsByClassName('tablink')
          for (i = 0; i < tablinks.length; i++) {
            tablinks[i].style.color = ''
            tablinks[i].style.fontSize = ''
          }
          elmnt.style.color = color
          tabcontent = document.getElementsByClassName('tabcontent')
          for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = 'none'
          }
          document.getElementById(loginName).style.display = 'block'
        }
        // 触发 id="defaultOpen" click 事件
        document.getElementById('defaultOpen').click()
      </script>
    </main>
    <!-- footer start -->
    <footer>
      <div class="container">
        <p class="up">
          <span><a href="">关于我们</a></span>
          <span class="space"></span>
          <span><a href="">帮助中心</a></span>
          <span class="space"></span>
          <span><a href="">售后服务</a></span>
          <span class="space"></span>
          <span><a href="">配送与验收</a></span>
          <span class="space"></span>
          <span><a href="">商务合作</a></span>
          <span class="space"></span>
          <span><a href="">搜索推荐</a></span>
          <span class="space"></span>
          <span><a href="">友情链接</a></span>
        </p>
        <p class="down">CopyRight © 小兔鲜儿</p>
      </div>
    </footer>
  </body>
</html>
